<script setup>

const popupRef = ref()

const options = ref()
const resolve = ref()
const show = _options => {
    _options.okText = _options.okText ?? '我知道了'
    options.value = _options
    popupRef.value.open()
    return new Promise(_resolve => {
        resolve.value = _resolve
    })
}

defineExpose({
    show
})


const confirm = value => {
    resolve.value(value)
    popupRef.value.close()
}

qly.tool.setTool('qlyMessage', show)


</script>

<template>
    <uni-popup ref="popupRef">
        <view class="qly-message" v-if="options">
            <view class="message-view">
                <view class="message-text" v-for="message in options.message.split('\n')">{{ message }}</view>
            </view>
            <view class="btn-group">
                <view class="btn-view btn-yes" @click="confirm(true)">{{options.okText}}</view>
            </view>
        </view>
    </uni-popup>
</template>

<style scoped lang="scss">
.message-text {
    width: 100%;
    line-height: 54rpx;
}

.btn-view {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-no {
    flex: 1;
    height: 72rpx;
    background: #F5F5F5;
    border-radius: 104rpx 104rpx 104rpx 104rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #303133;
    margin-right: 24rpx;
}

.btn-yes {
    flex: 1;
    height: 72rpx;
    background: $x-primary-color;
    border-radius: 104rpx 104rpx 104rpx 104rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #FFFFFF;
}

.btn-group {
    display: flex;
    justify-content: space-between;
    margin-top: 48rpx;
}

.message-view {
    width: 100%;
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    color: #303133;
}

.qly-message {
    padding: 48rpx 38rpx 48rpx 36rpx;
    box-sizing: border-box;
    background-color: #FFFFFF;
    margin-left: 56rpx;
    margin-right: 54rpx;
    width: 640rpx;
    display: flex;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    flex-direction: column;
}
</style>
